﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ThemSinhVien.ascx.cs" Inherits="QuanLyKTX_Phong_ThemSinhVien" %>


<style type="text/css">
    #SinhVien img {
        cursor: move;
    }
     
    #holder {
        border: 5px dashed #00ff21;
        margin: 10px auto;
        min-height: 200px;
        padding: 5px;
        background-color: #ccc;
        z-index:100000;
    }
</style>

<div class="subnav admin-views-subnav">
    <div class="container-fluid">
        <ul class="nav nav-pills">
            <li><a href="Default.aspx">Phòng</a></li>
            <li class="active"><a href="#">Thêm Sinh viên</a></li>

        </ul>
    </div>
</div>


<div class="container-fluid">
    <div class="form-horizontal form-bordered form-validate" id="create">
        <div class="page-header clearfix">
            <h2 class="page-title pull-left">Thêm Sinh viên
                <span id="spinner" class="loaded"><i class="fa fa-spinner fa-spin fa-sm"></i></span>
            </h2>
        </div>

    </div>

    <div class="editor admin-editor">

        <div id="overlay-editor">

            <div id="StatusBox" runat="server">
            </div>

            <div class="row clearfix">

                <div class="col-md-9">
                   
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            DANH SÁCH SINH VIÊN <input type="hidden" value="<%=Model.Phong.IDPhong %>" id="idphong"/>
                         
                        </div>
                        <div class="panel-body">
                            <table id="SinhVien" class="table table-hover table-nomargin dataTable table-bordered">
                                <thead>
                                    <tr class='thefilter'>
                                        <th class="table-item-title" style="width: 50px"><i class="fa fa-picture-o"></i></th>
                                        <th class="table-item-title">MSSV</th>
                                        <th class="table-item-title">Họ tên</th>
                                        <th class="table-item-title">Ngày sinh</th>
                                        <th class="table-item-title">Số điện thoại</th>
                                        <th class="table-item-title">Lớp</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <asp:Repeater ID="rptItems" runat="server">
                                        <ItemTemplate>
                                            <tr id="<%# Eval("IDSinhVien") %>">
                                                <td class="table-item-title">
                                                    <img src="<%#Eval("AnhDaiDien") %>" width="48" class="ui-widget-content ui-corner-tr" data-idsinhvien="<%#Eval("IDSinhVien") %>" /></td>
                                                <td class="table-item-title"><%#Eval("MaSoSinhVien") %></td>
                                                <td class="table-item-title">
                                                    <a href="/QuanLyKTX/SinhVien/Default.aspx?controller=ctsinhvien&id=<%#Eval("IDSinhVien") %>" rel="tooltip" title="Xem thông tin Sinh viên: <%#Eval("HoTenDayDu") %>">
                                                        <%#Eval("HoTenDayDu") %>
                                                    </a>(<%#Eval("GetGioiTinh") %>)
                                                </td>
                                                <td class="table-item-title"><%#Eval("NgaySinh","{0:d}") %></td>

                                                <td class="table-item-title"><%#Eval("SoDienThoai") %></td>
                                                <td class="table-item-title"><%#Eval("Lop") %></td>

                                            </tr>
                                        </ItemTemplate>
                                    </asp:Repeater>

                                </tbody>
                            </table>
                            <asp:PagingControl ID="PagingControl1" runat="server" FirstPageText="|<" PreviousPageText="<<" NextPageText=">>" LastPageText=">|" />
                        </div>
                    </div>
                </div>
                <div class="col-md-3">

                     <div class="panel panel-primary">
                        <div class="panel-heading">THÊM SINH VIÊN</div>
                        <div class="panel-body">
                            <div id="holder">
                            </div>

                            Kéo sinh viên vào đây để thêm vào phòng
                          
                        </div>
                    </div>

                    <div class="panel panel-primary">
                        <div class="panel-heading">PHÒNG: <%=Model.Phong.TenPhong %> -  <%=Model.Phong.GetLoaiPhong %></div>
                        <div class="panel-body">
                            Khu nhà: <b><%=Model.Phong.KhuNha.TenKhuNha %></b>
                            <br />

                            Số giường: <%=Model.Phong.SoGiuong %>
                            <br />
                            Sinh viên đang ở:<span class="badge"> <%=Model.Phong.SoLuongSinhVien %> sinh viên</span>
                            <br />

                            Thông tin:
                            <br />
                            <%=Model.Phong.GhiChu %>
                        </div>
                    </div>
                    
                </div>
            </div>
            <hr>
            <div class="btn-wrapper clearfix">
                <div class="pull-left">
                    <button disabled="disabled" class="btn btn-default" style="border: none;">
                        <i class="fa fa-info-circle"></i>

                        <span class="ng-scope "></span>
                    </button>
                </div>
                <div class="pull-right">
                    <span id="spinner" class="loaded"><i class="fa fa-spinner fa-spin fa-lg"></i></span>
                     <a href="javascript:window.history.back();" class="btn btn-default "><i class="fa fa-ban"></i>Hủy</a>
                </div>
            </div>
        </div>
    </div>
    
</div>


<script type="text/javascript">
    $(function () {

        $("#SinhVien img").draggable({
            cursor: "crosshair",
            revert: "invalid",
            containment: "document",
            helper: "clone",
            cursor: "move"
        });

        $("#holder").droppable({
            accept: "#SinhVien img",
            activeClass: "ui-state-highlight",
            hoverClass: "ui-state-active",
            drop: function (event, ui) {
                console.log("drop");
                $(this).removeClass("border").removeClass("over");
                var dropped = ui.draggable;
                var droppedOn = $(this);
                $(dropped).detach().css({ top: 0, left: 0 }).appendTo(droppedOn);
                var idPhong = $("#idphong").val();
                var idSinhVien = $("#SinhVien img").attr("data-idsinhvien");

                $.ColorLife.jsonXepPhongSinhVien(idPhong, idSinhVien);

            },
            over: function (event, elem) {
                $(this).addClass("ui-state-active");
                console.log("over");
            },
            out: function (event, elem) {
                $(this).removeClass("over");
            }
        });
        $("#holder").sortable();
    });
</script>

